<template>
	<view class="rose-list-box">
		<view class="rose-list-bg"><image src="http://static.kuaimayoupin.com/7886512067220559.png"></image></view>
		<view class="rose-list-card inner">
			<view class="rose-list-top">
				<view class="rose-number">{{vipInfo.balance}}</view>
				<text>当前剩余玫瑰(支)</text>
			</view>
			<!-- <view class="rose-list-bot">
				<view class="rose-list-time">
					2020年9月
					<image src="http://static.kuaimayoupin.com/5141465357061841.png" mode="aspectFit"></image>
				</view>
				<view class="rose-list-bot-money">
					<view>收入：200</view>
					<view>支出：20</view>
				</view>
			</view> -->
		</view>
		<view class="rose-list-ul">
			<view class="rose-list-li" v-for="(item, index) in list" :key="index">
				<view class="rose-list-left">
					<!-- 充值 -->
					<image style="border-radius: 50%;" v-if="item.avatar && item.type != 'post_order'" :src="item.avatar"></image>
					<image v-if="item.type != 'post_order' && !item.avatar" src="http://static.kuaimayoupin.com/7421033739847804.png" mode=""></image>
					
					<image v-if="item.type == 'post_order'" src="../../static/xiadan.png" mode=""></image>
					
					<!-- 下单折扣 -->
					<!-- <image src="http://static.kuaimayoupin.com/2174722731065879.png" mode=""></image> -->
				</view>
				<view class="rose-list-right">
					<view class="rose-list-title">
						<view>{{ item.note }}</view>
						<text>{{ item.quantity }}</text>
					</view>
					<view class="rose-list-item-money">{{ item.created_time | dateformat }}</view>
				</view>
			</view>
		</view>
		<view class="nomore">已加载到底啦</view>
	</view>
</template>

<script>
import { transactions } from '@/api/rose/rose.js';
export default {
	data() {
		return {
			list: [],
			vipInfo: {}
		};
	},
	created() {
		this.transactions();
		this.vipInfo= uni.getStorageSync('vipInfo')
	},
	methods: {
		transactions() {
			transactions().then(res => {
				this.list = res.data.list;
				console.log(this.list)
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.rose-list-box {
	background: #fff;
	min-height: 100vh;
}
.rose-list-bg {
	height: 364upx;
	image {
		display: block;
		height: 364upx;
		width: 100%;
	}
}
.rose-list-card {
	border-radius: 20upx;
	padding: 20upx 40upx;
	background: #fff;
	width: 690upx;
	margin: -240upx auto 0;
	box-shadow: 0px 3px 10px 0px rgba(0, 42, 64, 0.07);
	.rose-list-top {
		// border-bottom: 1px solid #dfe1ec;
		padding-bottom: 40upx;
		.rose-number {
			color: rgba(71, 74, 88, 1);
			font-size: 52upx;
			font-weight: 500;
		}
		text {
			color: #8389a0;
			font-size: 28upx;
		}
	}
	.rose-list-bot {
		.rose-list-time {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #474a58;
			padding: 20upx 0;
			font-weight: 400;
			image {
				display: block;
				width: 20upx;
				height: 12upx;
				margin-left: 10upx;
			}
		}
		.rose-list-bot-money {
			display: flex;
			justify-content: flex-start;
			color: #8389a0;
			view {
				width: 50%;
			}
		}
	}
}
.rose-list-ul {
	padding: 100upx 30upx 0;
}
.rose-list-li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30upx;
	.rose-list-title {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		align-items: center;
	}
	.rose-list-left {
		margin-right: 20upx;
		image {
			display: block;
			width: 128upx;
			height: 128upx;
		}
	}
	.rose-list-right {
		border-bottom: 1px solid #dfe1ec;
		flex: 2;
		padding-bottom: 40upx;
	}
}
.rose-list-item-money {
	color: rgba(131, 137, 160, 1);
}
.nomore {
	color: rgba(223, 225, 236, 1);
	font-size: 28upx;
	width: 400upx;
	margin: 60upx auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nomore::after {
	content: '';
	display: block;
	width: 64upx;
	height: 4upx;
	background: #dfe1ec;
}
.nomore::before {
	content: '';
	display: block;
	width: 64upx;
	height: 4upx;
	background: #dfe1ec;
}
</style>
